<template>
	<view class="content">
		<view class="bg">
			<u-navbar :is-back="false" :placeholder="true" title="首页"></u-navbar>
			<view class="head fixed-head">
				<view>
					<image src="@/static/newImg/index/logo.png"></image>
					<text>仰望心理</text>
				</view>
				<view>
					<image @click="handelMyEvaluate" src="@/static/newImg/index/cp.svg"></image>
					<button open-type="contact" @contact="handleContact">
						<image src="@/static/newImg/index/consult.svg"></image>
					</button>
				</view>
			</view>
		</view>

		<scroll-view class="scrollWrap" :enhanced="true" scroll-y :bounces="false" :show-scrollbar="false">
			<!-- <view class="" style="height: 100rpx"></view> -->
			<view class="container">
				<!-- <view class="head fixed-head">
					<view>
						<image src="@/static/newImg/index/logo.png"></image>
						<text>仰望心理</text>
					</view>
					<view>
						<image @click="handelMyEvaluate" src="@/static/newImg/index/cp.svg"></image>
						<button open-type="contact" @contact="handleContact">
							<image src="@/static/newImg/index/consult.svg"></image>
						</button>
					</view>
				</view> -->
				<view class="big-img">
					<u-swiper
						:circular="true"
						:list="list1"
						height="294rpx"
						:style="{
							width: '688rpx',
							margin: '0 auto'
						}"
					></u-swiper>
					<!-- <image src="@/static/newImg/index/bigBg.png"></image> -->
				</view>
				<view class="card-list">
					<view v-for="item in categoryList" @click="moreEvaluate(item.id)">
						<view>{{ item.name }}</view>
						<view>
							<view>
								<text>去测评</text>
								<u-icon size="12" name="arrow-right" color="#81B899"></u-icon>
							</view>
							<image :src="item.pic" mode=""></image>
							<!-- 	<image v-if="item.name === '心理'" src="/static/newImg/index/capaticy.svg"></image>
							<image v-if="item.name === '关系'" src="/static/newImg/index/personRal.svg"></image>
							<image v-if="item.name === '职业'" src="/static/newImg/index/job.svg"></image> -->
						</view>
					</view>
					<!-- <view style="margin-bottom: 16rpx;">
						<view>情感</view>
						<view>
							<view>
								<text>去测评</text>
								<u-icon size="12" name="arrow-right" color="#81B899"></u-icon>
							</view>
							<image src="/static/newImg/index/emot.svg"></image>
						</view>

					</view>
					<view style="margin-bottom: 16rpx;">
						<view>人际关系</view>
						<view>
							<view>
								<text>去测评</text>
								<u-icon size="12" name="arrow-right" color="#81B899"></u-icon>
							</view>
							<image src="/static/newImg/index/personRal.svg"></image>
						</view>
					</view>
					<view style="margin-bottom: 16rpx;">
						<view>职场</view>
						<view>
							<view>
								<text>去测评</text>
								<u-icon size="12" name="arrow-right" color="#81B899"></u-icon>
							</view>
							<image src="/static/newImg/index/job.svg"></image>
						</view>
					</view>
					<view>
						<view>能力</view>
						<view>
							<view>
								<text>去测评</text>
								<u-icon size="12" name="arrow-right" color="#81B899"></u-icon>
							</view>
							<image src="/static/newImg/index/capaticy.svg"></image>
						</view>
					</view>
					<view>
						<view>健康</view>
						<view>
							<view>
								<text>去测评</text>
								<u-icon size="12" name="arrow-right" color="#81B899"></u-icon>
							</view>
							<image src="/static/newImg/index/health.svg"></image>
						</view>
					</view> -->
					<view @click="moreEvaluate('')">
						<view>更多</view>
						<view>
							<view>
								<text>全部测评</text>
								<u-icon size="12" name="arrow-right" color="#81B899"></u-icon>
							</view>
						</view>
					</view>
				</view>
				<view class="eval-list">
					<view class="eval-list-head">
						<view>
							<text>大家都在测</text>
							<text>探索你，神秘的内心世界</text>
						</view>
						<view @click="moreEvaluate('')">
							<text>更多</text>
							<u-icon size="12" name="arrow-right" color="#81B899"></u-icon>
						</view>
					</view>
					<view class="eval-list-card">
						<view v-for="item in evaluateList" @click="itemClickDetail(item)">
							<view>{{ item.appraisalName }}</view>
							<view>
								<image :src="$fullImageUrl(item.coverImage)"></image>
								<view><u-icon size="12" name="arrow-right" color="#fff"></u-icon></view>
							</view>
						</view>
					</view>
				</view>
				<view class="consult-list">
					<view class="consult-list-head">
						<view>
							<text>咨询师风采</text>
							<text>帮你了解更真实的自己</text>
						</view>
						<view @click="moreReservation">
							<text>更多</text>
							<u-icon size="12" name="arrow-right" color="#81B899"></u-icon>
						</view>
					</view>
					<view class="consult-list-card">
						<view v-for="item in dotList" @click="handelAppoint(item)">
							<view class="left">
								<image :src="item.avatarUrl"></image>
							</view>
							<view class="right">
								<view>
									<text>{{ item.expertName }}</text>
									<!-- <view>
											<image src="@/static/newImg/index/leval.svg"></image>
										<text>成熟</text>
									</view> -->
									<view>{{ subTitle(item.title) }}</view>
								</view>
								<view>
									<view>{{ item.tags }}</view>
									<view>擅长：{{ item.domainName }}</view>
								</view>
								<view>
									<view>
										<text>
											<text style="font-weight: bold; color: #666">{{ item.totalConsultHours }}</text>
											<text>小时</text>
										</text>
										<text>
											<text>从业</text>
											<text style="font-weight: bold; color: #666">{{ item.workingYears }}</text>
											<text>年</text>
										</text>
									</view>
									<view>
										<image src="@/static/newImg/index/location.svg"></image>
										<text>{{ item.cityCopy }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="article-list">
					<view class="article-list-head">
						<view>
							<text>仰望资讯</text>
							<text>每一次服务，都是心与心的交流</text>
						</view>
						<view @click="handelArticle">
							<text>更多</text>
							<u-icon size="12" name="arrow-right" color="#81B899"></u-icon>
						</view>
					</view>
					<view class="article-list-tabs">
						<u-tabs lineColor="#76A26F" activeStyle="{ color: '#132066' }" :list="tabList" @click="onClickItem"></u-tabs>
					</view>
					<view class="article-list-card">
						<!-- <view v-for="item in acticleList" @click="handelArticleDetail(item)">
							<view class="left">
								<view>{{ item.title }}</view>
								<view>{{ item.summary }}</view>
								<view>
									<view>{{ item.author }}</view>
									<view>{{ item.publishedAt }}</view>
								</view>
							</view>
							<view class="right">
								<image :src="$fullImageUrl(item.coverImage)" mode=""></image>
							</view>
						</view> -->
						<view v-for="item in acticleList" @click="handelArticleDetail(item)">
							<view class="left">
								<view class="title">{{ item.title }}</view>
								<view class="summary">{{ item.summary }}</view>
								<view class="meta">
									<view class="author">{{ item.author }}</view>
									<view class="date">{{ item.publishedAt }}</view>
								</view>
							</view>
							<view class="right">
								<image :src="$fullImageUrl(item.coverImage)" mode="aspectFill"></image>
							</view>
						</view>
					</view>
				</view>
				<view style="height: 20rpx; background: #f6f7ff"></view>
			</view>
		</scroll-view>
	</view>
</template>
<script>
import { getAppraisalList, getExpertList, getHomeArticleCategoryList, getArticleList } from '@/api/index/index.js';
import { getCategoryList } from '@/api/evaluate/index.js';
import { login } from '../api/login';
import { getLastPartAfterLastComma } from '@/utils/common.js';
import config from '@/config';

export default {
	data() {
		return {
			list1: [
				'https://xl.yangwangqy.com/profile/upload/2025/08/17/bigBg_20250817145805A007.png',
				'https://xl.yangwangqy.com/profile/upload/2025/08/17/bigBg2_20250817114416A006.png',
				'https://xl.yangwangqy.com/profile/upload/2025/08/17/bigBg1_20250817114404A005.png'
			],
			dotList: [],
			articleTypeId: 0,
			acticleList: [],
			evaluateList: [],
			domHeight: '',
			tabList: [],
			categoryList: []
		};
	},
	onShareAppMessage() {
		return {
			title: '仰望心理'
			// ...其他配置
		};
	},
	onShow() {
		//查询评测首页推荐
		getAppraisalList().then((res) => {
			// console.log(res);
			this.evaluateList = res.rows;
			// console.log(this.evaluateList);
		});
		//查询专家首页推荐
		getExpertList().then((res) => {
			this.dotList = [...res.rows];
			this.dotList.map((i) => {
				i.cityCopy = getLastPartAfterLastComma(i.city);
			});
		});
		//查询文章分类
		getHomeArticleCategoryList().then((res) => {
			this.tabList = res.rows;
			this.articleTypeId = this.tabList[0].id;
			this.getArticleList();
		});

		getCategoryList().then((res) => {
			let data = res.rows;
			this.categoryList = [];
			data.forEach((item) => {
				if (item.name == '健康') {
					this.categoryList.push({
						id: item.id,
						name: item.name,
						pic: '/static/images/1.svg'
					});
				}
				if (item.name == '职场') {
					this.categoryList.push({
						id: item.id,
						name: item.name,
						pic: '/static/images/2.svg'
					});
				}
				if (item.name == '亲子') {
					this.categoryList.push({
						id: item.id,
						name: item.name,
						pic: '/static/images/5.svg'
					});
				}
				if (item.name == '婚姻') {
					this.categoryList.push({
						id: item.id,
						name: item.name,
						pic: '/static/images/3.svg'
					});
				}
				if (item.name == '社会') {
					this.categoryList.push({
						id: item.id,
						name: item.name,
						pic: '/static/images/4.svg'
					});
				}
			});
		});
	},
	computed: {},
	methods: {
		// click() {},
		handleContact(e) {
			// console.log('客服会话触发', e.detail); // 包含sessionFrom等参数
			// 可在此处记录用户行为或上报数据
		},
		handelArticle() {
			this.$tab.navigateTo('/subset/pages/articlePage/articlePage');
		},
		onClickItem(item) {
			this.articleTypeId = item.id;
			this.getArticleList();
			// if (this.tabList[index] === this.articleType[index].name) {
			// 	this.articleTypeId = this.articleType[index].id;
			// 	this.current = index;

			// }
		},
		handelMyEvaluate() {
			this.$tab.navigateTo(`/subset/pages/evaluate/search/myEvaluate`);
		},
		getArticleList() {
			getArticleList({
				categoryId: this.articleTypeId
			}).then((res) => {
				this.acticleList = res.rows;
				// console.log(this.acticleList );
			});
		},
		handelArticleDetail(e) {
			this.$tab.navigateTo(`/subset/pages/articlePage/articleDetail?articleId=${e.id}`);
		},
		handleAppointOrder() {
			this.$tab.navigateTo(`/subset/pages/consult/search/myConsult`);
		},
		handelAppoint(e) {
			this.$tab.navigateTo(`/subset/pages/consult/consultDetail?id=${e.id}`);
		},
		moreReservation() {
			this.$tab.switchTab(`/pages/consult/index`);
		},
		moreEvaluate(id) {
			uni.setStorageSync('currentTypeId', id ? id : '');
			this.$tab.switchTab('/pages/evaluate/index');
		},
		itemClickDetail(item) {
			this.$tab.navigateTo(`/subset/pages/evaluate/evaluateDetail?id=${item.id}`);
		},
		jumpSearchPage() {
			this.$tab.navigateTo(`/subset/pages/search/index`);
		},
		subTitle(str) {
			const index = str.indexOf('、');
			const copy = index > -1 ? str.substring(0, index) : str;
			return copy;
		}
	},
	mounted() {
		this.domHeight = uni.getStorageSync('domHeight');
		// console.log(this.domHeight);
	}
};
</script>
<style scoped lang="less">
@import url('@/static/font/navBar.less');

.content {
	width: 100%;
	height: 100%;

	position: relative;
	background-color: #f6f7ff;

	.bg {
		width: 100%;
		height: 270rpx;
		background: linear-gradient(127deg, #a4dcb3 0%, #ffeed6 37%, #d3fffb 100%);
		// border-radius: 0rpx 0rpx 80rpx 80rpx;
		position: fixed;
		top: 0;

		position: fixed;
		// top: 140rpx;
		left: 0;
		right: 0;
		z-index: 9999;
		padding: 38rpx 32rpx !important;
		box-sizing: border-box;
	}

	.scrollWrap {
		width: 100%;
		height: 100% !important;
		background-color: #f6f7ff;
		.container {
			width: 100%;
			padding: 0 30rpx;
			margin-top: 290rpx;
			box-sizing: border-box;
		}

		.big-img {
			width: 688rpx;
			height: 294rpx;
			margin: 0 auto;
			overflow: hidden;
			border-radius: 20rpx;
			::v-deep .u-swiper-item image {
				border-radius: 20rpx;
			}
		}

		.card-list {
			width: 100%;
			background: #ffffff;
			border-radius: 20rpx;
			margin-top: 26rpx;
			padding: 22rpx 18rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-content: space-between;
			flex-wrap: wrap;
			gap: 8rpx;
			> view {
				width: 200rpx;
				background: #f7fbf9;
				border-radius: 16rpx;
				padding: 22rpx 20rpx;
				box-sizing: border-box;
				display: flex;
				align-content: space-between;
				flex-wrap: wrap;

				> view:nth-child(1) {
					width: 100%;
					font-weight: bold;
					font-size: 30rpx;
					color: #132066;
				}

				> view:nth-child(2) {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;

					> view:nth-child(1) {
						font-weight: 500;
						font-size: 26rpx;
						color: #81b899;
						display: flex;
						align-items: center;
					}

					> image {
						width: 57rpx;
						height: 48rpx;
					}
				}
			}
		}

		.eval-list {
			width: 100%;
			background: #ffffff;
			border-radius: 20rpx;
			margin-top: 16rpx;
			padding: 32rpx 24rpx;
			box-sizing: border-box;

			&-head {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				> view:nth-child(1) {
					> text:nth-child(1) {
						font-weight: 500;
						font-size: 30rpx;
						font-weight: bold;
						color: #132066;
					}

					> text:nth-child(2) {
						font-weight: 400;
						font-size: 24rpx;
						color: #a2a2a2;
						margin-left: 12rpx;
					}
				}

				> view:nth-child(2) {
					font-weight: 400;
					font-size: 24rpx;
					color: #81b899;
					display: flex;
				}
			}

			&-card {
				width: 100%;
				margin-top: 30rpx;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;

				> view {
					width: calc(50% - 18rpx);
					padding: 16rpx;
					box-sizing: border-box;
					border-radius: 16rpx;

					> view:nth-child(1) {
						font-weight: 400;
						font-size: 26rpx;
						color: #132066;
						width: 100%;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					> view:nth-child(2) {
						width: 100%;
						margin-top: 14rpx;
						display: flex;
						align-items: center;

						> image {
							// width: 198rpx;
							// height: 78rpx;
							width: 198rpx;
							height: 110rpx;
							border-radius: 8rpx;
						}

						> view {
							width: 36rpx;
							height: 36rpx;
							background: #ffc6b5;
							border-radius: 50%;
							margin-left: 18rpx;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
				}

				> view:nth-child(1) {
					background: #fffaf3;
				}

				> view:nth-child(2) {
					background: #f7fbf7;
					> view:nth-child(2) {
						> view {
							background: #69c1a1;
						}
					}
				}
				> view:nth-child(3) {
					background: #f8f5ff;
					> view:nth-child(2) {
						> view {
							background: #a09df2;
						}
					}
				}

				> view:nth-child(4) {
					background: #fff4fd;
					> view:nth-child(2) {
						> view {
							background: #ff7788;
						}
					}
				}
				> view:nth-child(n + 3) {
					margin-top: 22rpx;
				}
			}
		}

		.consult-list {
			width: 100%;
			background: #ffffff;
			border-radius: 20rpx;
			margin-top: 16rpx;
			padding: 32rpx 24rpx;
			box-sizing: border-box;

			&-head {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				> view:nth-child(1) {
					> text:nth-child(1) {
						font-weight: 500;
						font-size: 30rpx;
						color: #132066;
						font-weight: bold;
					}

					> text:nth-child(2) {
						font-weight: 400;
						font-size: 24rpx;
						color: #a2a2a2;
						margin-left: 12rpx;
					}
				}

				> view:nth-child(2) {
					font-weight: 400;
					font-size: 24rpx;
					color: #81b899;
					display: flex;
				}
			}

			&-card {
				width: 100%;

				> view {
					width: 100%;
					display: flex;
					justify-content: space-between;
					padding: 24rpx 0 22rpx 0;
					border-bottom: 2rpx solid #eeeeee;

					.left {
						width: 184rpx;
						height: 182rpx;
						border-radius: 12rpx;
						overflow: hidden;
						> image {
							width: 100%;
							height: 100%;
						}
					}

					.right {
						width: calc(100% - 198rpx);
						display: flex;
						flex-wrap: wrap;
						align-content: space-between;

						> view:nth-child(1) {
							width: 100%;
							display: flex;
							padding-top: 10rpx;

							> text:nth-child(1) {
								font-weight: 600;
								font-size: 30rpx;
								color: #4a548a;
							}

							> view:nth-child(2) {
								padding: 4rpx 16rpx;
								background: #eef4ff;
								border-radius: 8rpx;
								border: 2rpx solid rgba(74, 84, 138, 0.102);
								font-weight: 400;
								font-size: 20rpx;
								color: #132066;
								margin-left: 20rpx;
							}
						}

						> view:nth-child(2) {
							width: 100%;

							> view {
								width: 100%;
								text-overflow: ellipsis;
								white-space: nowrap;
								overflow: hidden;
								font-weight: 400;
								font-size: 24rpx;
								color: #696b7b;
							}

							> view:nth-child(1) {
								margin-bottom: 8rpx;
							}
						}

						> view:nth-child(3) {
							width: 100%;
							display: flex;
							justify-content: space-between;
							align-items: center;

							> view:nth-child(1) {
								font-weight: 400;
								font-size: 24rpx;
								color: #696b7b;

								> text:nth-child(2) {
									margin-left: 16rpx;
								}
							}

							> view:nth-child(2) {
								display: flex;
								align-items: center;

								> image {
									width: 22rpx;
									height: 22rpx;
								}

								> text {
									font-weight: 400;
									font-size: 24rpx;
									color: #999999;
									margin-left: 6rpx;
								}
							}
						}
					}
				}

				> view:last-child {
					border: none;
					padding-bottom: 0;
				}
			}
		}

		.article-list {
			width: 100%;
			background: #ffffff;
			border-radius: 20rpx;
			margin-top: 16rpx;
			padding: 32rpx 24rpx;
			box-sizing: border-box;
			&-head {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				> view:nth-child(1) {
					> text:nth-child(1) {
						font-weight: 500;
						font-size: 30rpx;
						color: #132066;
						font-weight: bold;
					}

					> text:nth-child(2) {
						font-weight: 400;
						font-size: 24rpx;
						color: #a2a2a2;
						margin-left: 12rpx;
					}
				}

				> view:nth-child(2) {
					font-weight: 400;
					font-size: 24rpx;
					color: #81b899;
					display: flex;
				}
			}

			&-tabs {
				margin-bottom: 6rpx;

				::v-deep .u-tabs__wrapper__nav__item__text {
					font-weight: 400;
					font-size: 28rpx;
					color: #132066;
				}
			}

			&-card {
				width: 100%;

				> view {
					width: 100%;
					padding: 22rpx 0 26rpx 0;
					border-bottom: 2rpx solid #eeeeee;
					display: flex;
					justify-content: space-between;
					align-items: flex-end;

					.left {
						width: calc(100% - 208rpx);
						padding: 13rpx 0 5rpx 0;
						height: 164rpx; // 与右侧图片高度一致

						> view:nth-child(1) {
							width: 100%;
							display: -webkit-box;
							/* 必须结合 */
							-webkit-line-clamp: 2;
							/* 显示行数 */
							-webkit-box-orient: vertical;
							/* 方向垂直 */
							overflow: hidden;
							/* 隐藏溢出 */
							text-overflow: ellipsis;
							/* 兼容单行省略号 */
							font-weight: 400;
							font-size: 28rpx;
							color: #333333;
						}

						> view:nth-child(2) {
							font-weight: 400;
							font-size: 24rpx;
							margin: 10rpx 0 22rpx 0;
							color: #696b7b;
							display: -webkit-box;
							/* 必须结合 */
							-webkit-line-clamp: 1;
							/* 显示行数 */
							-webkit-box-orient: vertical;
							/* 方向垂直 */
							overflow: hidden;
							/* 隐藏溢出 */
							text-overflow: ellipsis;
							/* 兼容单行省略号 */
						}

						> view:nth-child(3) {
							width: 100%;
							display: flex;
							align-items: center;
							font-weight: 400;
							height: 30rpx;
							line-height: 30rpx;
							font-size: 24rpx;
							color: #132066;

							> view:nth-child(1) {
								width: 40%;
							}

							> view:nth-child(2) {
								width: 60%;
							}
						}
					}

					.right {
						width: 160rpx;
						height: 164rpx;
						border-radius: 12rpx;
						overflow: hidden;

						> image {
							width: 100%;
							height: 100%;
						}
					}
				}

				> view:last-child {
					padding-bottom: 0;
					border: none;
				}
			}
		}
	}
}

.article-list-tabs {
	margin-bottom: 6rpx;
	padding-left: 0;
	margin-left: 0;

	::v-deep .u-tabs {
		padding-left: 0;
	}

	::v-deep .u-tabs__wrapper {
		padding-left: 0;
	}

	::v-deep .u-tabs__wrapper__nav {
		padding-left: 0;
	}

	::v-deep .u-tabs__wrapper__nav__item {
		padding-left: 0;
		margin-left: 0;
	}

	::v-deep .u-tabs__wrapper__nav__item__text {
		font-weight: 400;
		font-size: 28rpx;
		color: #132066;
	}
}

.fixed-head {
	position: fixed;
	top: 140rpx;
	left: 0;
	right: 0;
	z-index: 9999;
	padding: 38rpx 32rpx !important;
	box-sizing: border-box;
}
.head {
	// background: linear-gradient(127deg, #a4dcb3 0%, #ffeed6 37%, #d3fffb 100%);
	width: 100%;
	padding: 38rpx 0;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	align-items: center;
	> view:nth-child(1) {
		display: flex;
		align-items: center;

		> image {
			width: 60rpx;
			height: 60rpx;
			background: #ffffff;
			border-radius: 50%;
		}

		> text {
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;
			margin-left: 16rpx;
		}
	}

	> view:nth-child(2) {
		display: flex;
		align-items: center;
		> image:nth-child(1) {
			width: 41rpx;
			height: 44rpx;
		}
		> button {
			padding: 0;
			width: 45rpx;
			height: 45rpx;
			background-color: rgba(255, 255, 255, 0.1);
			border: none;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-left: 40rpx;
		}
		button:after {
			border: none;
		}
		> image:nth-child(2) {
			width: 45rpx;
			height: 45rpx;
		}
	}
}

.article-list-card {
	> view {
		display: flex;
		justify-content: space-between;
		align-items: flex-end; // 关键：底部对齐

		.left {
			flex: 1;
			min-width: 0;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: 164rpx; // 与右侧图片高度一致

			.title {
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
				font-size: 28rpx;
				color: #333;
			}

			.summary {
				font-size: 24rpx;
				color: #696b7b;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.meta {
				display: flex;
				justify-content: space-between;
				font-size: 24rpx;
				color: #132066;

				.author,
				.date {
					flex: 1;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.date {
					text-align: right;
					padding-left: 20rpx;
				}
			}
		}

		.right {
			width: 160rpx;
			height: 164rpx;
			margin-left: 24rpx;
			flex-shrink: 0;

			image {
				width: 100%;
				height: 100%;
				border-radius: 12rpx;
			}
		}
	}
}
</style>
